<!-- 非遗 -->
<template>
	<div>
		<common-header :tittle="tittle" :showmore="true"></common-header>
		<div class="page-content">

			<div class="box">
				<div class="flx">

					<span>
                            <img src="@/assets/imgs/home/22@2x.png" alt="">
                            <i></i>
                        </span>

				</div>

				<!-- banner -->
				<div class="banner">
					<img class="bgimg" src="@/assets/imgs/home/558@2x.png" alt="">
				</div>
				<p class="bt">非</p>
				<div class="link">
					<div>
						<span>硬度高 强度大</span>
						<span>

							<router-link to="/gallery" style="width: 100%;">
								查看图集
							</router-link>

						</span>

					</div>

				</div>

				<div class="cont">
					<!-- 特产标签 -->
					<specialtyLabel :label="labelArr" :tagType="tagType"> </specialtyLabel>
					<!-- 视频 -->

					<slideModule :moves="moves" :title="playerMoves"></slideModule>

					<!-- 人物 -->
					<slideModule :moves="character" :title="renwu"></slideModule>
					<!-- 专题 -->

					<div class="nav-fy">
						<h3>专题</h3>

						<swipe class="adver-swiper">
							<swipe-item class="slide1" v-for="(item,path,index) in adverListImg" :key="index">
								<router-link :to="{ path: item.path }">
									<img :src="item.imgSrc">
								</router-link>
							</swipe-item>
						</swipe>

					</div>

				</div>

				<!-- 体验 -->
				<imgText :tittle="experience" :items="items"></imgText>

				<!-- 周边商品 -->
				<productList :operate="operate" :title="producTitle"></productList>
			</div>
		</div>
	</div>
</template>

<script>
	import commonHeader from 'common/common-header-transparent'
	import imgText from 'common/imgText' //图文列表组件
	import productList from 'common/productList' //周边商城列表组件
	import slideModule from 'common/slideModule' //左右滑动模块
	import specialtyLabel from 'common/specialtyLabel' //特产标签
	import {
		Swipe,
		SwipeItem
	} from 'mint-ui';
	export default {
		data() {
			return {
				producTitle: '周边商城',
				playerMoves: "视频",
				renwu: "人物",
				tittle: '菌库',
				data: 0,
				tagType: '特产标签',
				experience: "体验",
				labelArr: [{
						title: "基本简介",
						path: '/information',
					},
					{
						title: "传承时间",
						path: '/information',
					},
					{
						title: "历史渊源",
						path: '/information',
					},
					{
						title: "传承人",
						path: '/information',
					},
					{
						title: "制作工艺",
						path: '/information',
					},
					{
						title: "艺术价值",
						path: '/information',
					},
					{
						title: "产业现状",
						path: '/information',
					},

				],
				operate: [{
						title: "窑变花瓶三件套",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						path: '/information',
						num: "9999"
					},
					{
						title: "窑变花瓶三件套窑变花瓶三件套",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						path: '/information',
						num: "9999"
					},
					{
						title: "窑变花瓶三件套",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						path: '/information',
						num: "9999"
					},
					{
						title: "窑变花瓶三件套",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						path: '/information',
						num: "9999"
					},
					{
						title: "窑变花瓶三件套",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						path: '/information',
						num: "9999"
					},
					{
						title: "窑变花瓶三件套",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						path: '/information',
						num: "9999"
					},
					{
						title: "窑变花瓶三件套",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						path: '/information',
						num: "9999"
					},

				],
				adverListImg: [{
						imgSrc: require('../../../assets/imgs/inf_img1.jpg'),
						path: '/special',
					},
					{
						'imgSrc': require('../../../assets/imgs/inf_img2.jpg'),
						path: '/special',
					},
					{
						'imgSrc': require('../../../assets/imgs/inf_img3.jpg'),
						path: '/special',
					},
					{
						'imgSrc': require('../../../assets/imgs/inf_img4.jpg'),
						path: '/special',
					},
					{
						'imgSrc': require('../../../assets/imgs/inf_img5.jpg'),
						path: '/special',

					}
				],
				items: [{
						text: '《必由之路》第七集速览 解说词  第八集速览',
						type: "体验",
						num: '1000',
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						link: "www.baidu.com",
					},
					{
						text: '受惠于港珠澳大桥及高铁开通 今年访港6000万受惠于港珠澳大桥及高铁开通 今年访港6000万',
						type: "体验",
						num: '1000',
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						link: "www.baidu.com",
					},
					{
						text: '个税专项附加扣除办法有望出炉 首套房政策将明确',
						type: "体验",
						num: '1000',
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						link: "www.baidu.com",

					}
				],
				moves: [{
						title: "普洱茶",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						cont: '香型独特',
						type: 1,
						num: "99"
					},
					{
						title: "普洱茶",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						cont: '历史渊源',
						type: 2,
						num: "9"
					},
					{
						title: "普洱茶",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						cont: '传承时间',
						type: 1,
						num: "999"
					},
					{
						title: "普洱茶",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						cont: '发展行业',
						type: 1,
						num: "999"
					},
					{
						title: "普洱茶",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						cont: '发展行业',
						type: 1,
						num: "9999"
					},

				],
				character: [

					{
						title: "普洱茶",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						cont: '香型独特',
						type: 1,
						num: "99"
					},
					{
						title: "普洱茶",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						cont: '历史渊源',
						type: 2,
						num: "9"
					},
					{
						title: "普洱茶",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						cont: '传承时间',
						type: 1,
						num: "999"
					},
					{
						title: "普洱茶",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						cont: '发展行业',
						type: 1,
						num: "999"
					},
					{
						title: "普洱茶",
						imgSrc: require('../../../assets/imgs/home/558@2x.png'),
						cont: '发展行业',
						type: 1,
						num: "9999"
					},

				]
			}
		},
		components: {
			commonHeader,
			swipe: Swipe,
			swipeItem: SwipeItem,
			imgText,
			productList,
			slideModule,
			specialtyLabel
		},
		computed: {
			newdata: function() {
				return this.data + 1
			}
		},
		// 截取字符长度
		filters: {
			filterFun: function(value) {
				if(value && value.length > 25) {
					value = value.substring(0, 25) + '...';
				}
				return value;
			}
		},
		mounted() {
			this.cartView()
		},
		methods: {

			add() {
				this.data++
			},

			cartView: function() {
				this.$axios.get('API/v1/feiyis').then((res) => {
					if(res) {

						console.log(JSON.stringify(res))
					} else {

					}

				})
			},
		}
	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	a {
		color: #fff;
	}
	
	.page-content {
		margin-top: 0px;
		background: #ffffff;
	}
	
	.header-box {
		z-index: 999;
	}
	
	h3 {
		position: relative;
		text-indent: 8px;
		&:after {
			position: absolute;
			content: '';
			width: 4px;
			height: 15px;
			border-radius: 2px;
			background: @base-blue-color;
			left: 0;
			right: 0;
			top: 1px;
			margin-left: 0;
			margin-right: auto;
		}
		&:before {
			content: '';
			position: absolute;
			font-weight: bold;
			right: 0px;
			top: 0;
			color: #e5e5e5;
			height: 20px;
			width: 20px;
			background-size: 100% 100%;
			background-image: url('../../../assets/imgs/right-jt.svg');
		}
	}
	
	.box {
		position: relative;
		.banner {
			height: 300px;
			width: 100%;
			box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
			img.bgimg {
				width: 100%;
				height: 100%;
			}
		}
		.flx {
			box-shadow: 2px 5px 20px #999;
			position: absolute;
			top: 175px;
			margin: 0 15px;
			width: calc(100% - 30px);
			border-radius: 5px;
			span {
				display: inline-block;
				position: relative;
				img {
					width: 100%;
					height: 100%;
					border-radius: 5px;
				}
				i {
					position: absolute;
					display: inline-block;
					content: '';
					width: 45px;
					height: 45px;
					background: url('../../../assets/imgs/home/details_video@2x.png');
					background-size: 100% 100%;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					margin: auto;
				}
			}
		}
		.bt {
			position: absolute;
			font-size: 24px;
			color: #fff;
			top: 101px;
			left: 20px;
		}
		.link {
			position: absolute;
			width: calc(100% - 50px);
			color: #fff;
			top: 144px;
			left: 20px;
			div {
				width: 100%;
				display: flex;
				justify-content: space-between;
				span {
					display: inline-block;
					text-align: right;
					&:last-child {
						position: relative;
						&:after {
							position: absolute;
							content: '';
							width: 10px;
							height: 10px;
							right: -15px;
							top: 3px;
							background: url('../../../assets/imgs/home/home_more@2x.png');
							background-size: 100% 100%;
						}
					}
				}
			}
		}
		.cont {
			width: calc(100% - 30px);
			padding: 128px 15px 0 15px;
		}
		//专题
		.nav-fy {
			padding: 30px 0px 40px 0px;
			background: #ffffff;
			h3 {
				font-size: 15px;
				font-weight: bold;
				width: 100%;
				text-align: left;
				padding: 0px 0 25px 0px;
				margin-top: 20px;
				position: relative;
			}
		}
		// 体验
		.latestContents {
			border-bottom: 7px solid @border-color;
			padding: 0px 15px 20px 15px;
			margin-bottom: 50px;
			width: calc(100% - 30px);
			h3 {
				font-size: 17px;
				font-weight: bold;
				width: 100%;
				text-align: left;
				padding: 0px 0 20px 0px;
				margin-top: 20px;
				position: relative;
			}
			.content {
				font-size: 14px;
				padding: 0 0px;
				display: flex;
				margin-bottom: 20px;
				justify-content: space-between;
				.nav-l {
					text-align: left;
					.unfold {
						height: 50px;
					}
					p {
						&:first-child {
							line-height: 25px;
						}
						&:last-child {
							margin-top: 6px;
							font-size: 12px;
							display: flex;
							justify-content: space-between;
							color: #CCCCCC;
							span {
								text-align: right;
								padding-right: 25px;
								display: inline-block;
								&:last-child {
									position: relative;
									&:after {
										position: absolute;
										content: '';
										width: 14px;
										height: 10px;
										background: url('../../../assets/imgs/home_browse@2x.png');
										background-size: 100% 100%;
										vertical-align: middle;
										left: 0;
										right: -25px;
										display: inline-block;
										top: 0;
										bottom: 0;
										margin: auto;
									}
								}
							}
						}
					}
				}
				.nav-r {
					width: 111px;
					height: 73px;
					margin-left: 25px;
					height: 75px;
					border-radius: 5px;
					img {
						width: 111px;
						height: 73px;
						border-radius: 5px;
					}
				}
			}
		}
	}
	
	// 左右滑动模块
	// 视频
	.slide-module {
		text-align: left;
		background: #fff;
		padding: 30px 0 0px 0px;
		h3 {
			font-size: 17px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 0px 0 25px 0px;
			margin-top: 20px;
			position: relative;
		}
		//显示左右滚动的css样式
		ul {
			display: inline-block;
			white-space: nowrap;
			overflow-x: scroll;
			overflow-y: hidden;
			width: 100%;
			li {
				margin-right: 20px;
				display: inline-block;
				width: 138px;
				i {
					display: inline-block;
					width: 138px;
					height: 92px;
					border-radius: 5px;
					position: relative;
					img {
						border-radius: 5px;
						width: 100%;
						height: 100%;
					}
					span {
						position: absolute;
						width: 40px;
						height: 20px;
						bottom: 5px;
						right: 5px;
						text-align: center;
						line-height: 20px;
						color: #fff;
						background: @base-blue-color;
						border-radius: 10px;
					}
				}
				p.title {
					font-size: 15px;
					font-weight: bold;
					color: @base-black-color;
					padding: 10px 0;
				}
				p.type {
					margin-top: 6px;
					font-size: 12px;
					display: flex;
					justify-content: space-between;
					color: #CCCCCC;
					span {
						text-align: right;
						padding-right: 22px;
						display: inline-block;
						&:last-child {
							position: relative;
							&:after {
								position: absolute;
								content: '';
								width: 14px;
								height: 10px;
								background: url('../../../assets/imgs/home_browse@2x.png');
								background-size: 100% 100%;
								vertical-align: middle;
								left: 0;
								right: -20px;
								display: inline-block;
								top: 0;
								bottom: 0;
								margin: auto;
							}
						}
					}
				}
				span {
					font-size: 12px;
					font-weight: 500;
					color: @base-color-gray;
				}
			}
			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
	
	.commodity {
		padding: 0 15px;
		width: calc(100% - 30px);
		h4 {
			font-size: 17px;
			color: @base-black-color;
			text-align: center;
			font-weight: bold;
			display: inline-block;
			position: relative;
			margin-bottom: 40px;
			&:after {
				position: absolute;
				content: '';
				width: 15px;
				height: 4px;
				background: @base-blue-color;
				top: 0;
				left: 0;
				right: -97px;
				bottom: 0;
				margin: auto;
				border-radius: 2px;
			}
			&:before {
				position: absolute;
				content: '';
				width: 15px;
				height: 4px;
				background: @base-blue-color;
				top: 0;
				left: -97px;
				right: 0px;
				bottom: 0;
				margin: auto;
				border-radius: 2px;
			}
		}
		ul {
			flex-wrap: wrap;
			display: flex;
			justify-content: space-between;
			text-align: left;
			li {
				width: 155px;
				background: @base-list-black-color;
				margin-bottom: 20px;
				padding-bottom: 20px;
				.img {
					width: 100%;
					height: 150px;
					display: inline-block;
					margin-bottom: 10px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				p {
					padding: 0 10px;
					height: 20px;
					margin-top: 5px;
					white-space: nowrap;
					overflow: hidden;
					width: calc(100% - 20px);
					text-overflow: ellipsis;
					&.title {
						font-size: 15px;
					}
					&.num {
						font-size: 15px;
						span {
							font-size: 12px;
							font-weight: bold;
							&:first-child {
								font-size: 14px;
							}
						}
					}
				}
			}
		}
	}
</style>